<template>
  <view id="login">
		<view class="login-bg">
			<image src="@/static/img/login/logo.png"></image>
		</view>
		<view class="login-box">
			<uni-forms ref="form" :rules="rules" :modelValue="form">
				<view class="input-bar">
					<image src="@/static/img/login/user-ico.png" class="icon"></image>
					<text class="input-bar-text">账号</text>
					<uni-forms-item label="" name="username">
						<uni-easyinput v-model="form.username" :inputBorder="false" placeholder="请输入账号" />
					</uni-forms-item>
				</view>
				<view class="input-bar">
					<image src="@/static/img/login/pass-ico.png" class="icon"></image>
					<text class="input-bar-text">密码</text>
					<uni-forms-item label="" name="password">
						<uni-easyinput v-model="form.password" type="password" :passwordIcon="false" :inputBorder="false" placeholder="请输入密码" />
					</uni-forms-item>
				</view>
				<view class="input-bar">
					<uni-forms-item label="" name="code">
						<uni-easyinput v-model="form.code" :inputBorder="false" placeholder="请输入验证码" />
					</uni-forms-item>
					<view class="imgCode" @click="getCode">
						<image :src="codeUrl"></image>
					</view>
				</view>
				<view class="remember-nav">
					<uni-data-checkbox 
						multiple 
						v-model="form.remember" 
						:localdata="[{text: '记住密码', value: 1}]" 
					></uni-data-checkbox>
				</view>
				<button type="primary" :loading="loading" class="u-margin-top-40" @click="submit('form')">登录</button>
				<button type="default" class="u-margin-top-40" @click="networkSample" v-if="!network">离线取样</button>
				<button type="default" class="u-margin-top-40" @click="networkCheck" v-if="!network">离线见证</button>
			</uni-forms>
		</view>
		
		<uni-popup ref="tipPopup" :mask-click="false" backgroundColor="#fff">
		  <!-- <view class="popup-tip">
				<text>应用程序有更新，请前往appstore下载</text>
			</view> -->
			<view class="popup-tip">
				<text>应用程序有更新，请点击<text style="color: #409EFF;">此处</text>下载</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getCode, login, getUser, getVersion } from '@/api/index'
import {encrypt} from '@/common/jsencrpty.js'
export default {
  data() {
    return {
			network: true,
      form:{
				username: '',
				password: '',
				uuid: '',
				code: '',
				remember: []
      },
			codeUrl: '',
			loading: false,
      rules: {
      	username: {
      		rules: [{ required: true, errorMessage: '账户不能为空' }]
      	},
				password: {
					rules: [{ required: true, errorMessage: '密码不能为空' }]
				},
				code: {
					rules: [{ required: true, errorMessage: '验证码不能为空' }]
				}
      }
    }
  },
  onBackPress(e) {
     return true;
    },
	onShow() {
		let _this = this
		_this.getCode()
		_this.getRememberMe()
		// uni.getNetworkType({
		// 	success: (res) => {
		// 		if (res.networkType != 'none') {
		// 			uni.getLocation({
		// 				type: 'gcj02',
		// 				geocode:true,
		// 				success: function (res) {
		// 					var point = new plus.maps.Point(res.longitude, res.latitude);
		// 					// var point = new plus.maps.Point(-103.21,53.27);
		// 					plus.maps.Map.reverseGeocode(
		// 						point, {},
		// 						(event)=>{
		// 							console.log(event,'event')
		// 							var address = -1
		// 							if(event.address){
		// 								address = event.address
		// 							}
		// 							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
		// 							var addressList = []
		// 							if(address !=-1){
		// 								addressList = address.match(reg).toString().split(",");
		// 								console.log(addressList,'addressList')
		// 							}
		// 							if(addressList.length >0){
		// 								uni.setStorageSync('addressCountry','中国')
		// 								console.log('中国')
		// 							}else if(address < 0){
		// 								console.log('国外')
		// 								uni.setStorageSync('addressCountry','国外')
		// 							}
		// 							console.log(address,'address',event.address)
		// 							// this.address.cityName = addressList[1];	
		// 						},
		// 						function(e) {
		// 							console.log(e,'e')
		// 						}
		// 					);
		// 					console.log(res,'res',res.address.country)
							
		// 					// if(res.address.country == '中国'){
		// 					// 	uni.setStorageSync('addressCountry','中国')
		// 					// }else{
		// 					// 	uni.setStorageSync('addressCountry','国外')
		// 					// }
							
		// 					let token = uni.getStorageSync('token')
		// 					if (token) {
		// 						uni.navigateTo({
		// 							url: '/pages/home/index'
		// 						})
		// 					} else {
		// 						let addressCountry =  uni.getStorageSync('addressCountry')
		// 						console.log(addressCountry,'addressCountry')
		// 						_this.getCode()
		// 						_this.getRememberMe()
		// 					}
							
		// 				},
		// 				fail:(err)=>{
		// 					uni.setStorageSync('addressCountry','中国')
		// 					let token = uni.getStorageSync('token')
		// 					if (token) {
		// 						uni.navigateTo({
		// 							url: '/pages/home/index'
		// 						})
		// 					} else {
		// 						let addressCountry =  uni.getStorageSync('addressCountry')
		// 						console.log(addressCountry,'addressCountry')
		// 						_this.getCode()
		// 						_this.getRememberMe()
		// 					}
		// 					console.log(err,uni.getStorageSync('addressCountry'))
		// 				}
		// 			});
		// 			// this.checkVersion()
					
		// 		} else {
		// 			this.network = false
		// 			uni.showToast({
		// 				title: '当前无网络连接',
		// 				icon: 'error',
		// 				duration: 3000
		// 			})
		// 		}
		// 	}
		// })
	},
  methods: {
		// 验证版本号是否过期
		checkVersion() {
			getVersion().then(res=>{
				if (res.data.version != getApp().globalData.version) {
					this.$nextTick(()=>{
						this.$refs.tipPopup.open('center')
					})
				}
			})
		},
		// 获取验证码
		getCode() {
			getCode().then(res=>{
				if (res.code == 200) {
					this.form.uuid = res.uuid
					this.codeUrl = "data:image/gif;base64," + res.img
				}
			})
		},
		// 读取记住密码
		getRememberMe() {
			let obj = uni.getStorageSync('rememberMe')
			if (obj && obj.username && obj.password) {
				this.form.username = obj.username
				this.form.password = obj.password
				this.form.remember.push(1)
			}
		},
		// 记住密码
		handleChange() {
			if (this.form.remember.length > 0) {
				uni.setStorageSync('rememberMe', this.form)
			} else {
				uni.removeStorageSync('rememberMe');
			}
		},
		// 跳转离线取样页面
		networkSample() {
			uni.navigateTo({
				url: '/pages/sample/network'
			})
		},
		// 跳转离线见证页面
		networkCheck() {
			uni.navigateTo({
				url: '/pages/sampleCheck/network'
			})
		},
		// 登录
    submit(form) {
    	this.$refs[form].validate().then(result=>{
				this.loading = true
				let data={
					username: encrypt(this.form.username),
					password: encrypt(this.form.password),
					uuid: this.form.uuid,
					code: this.form.code,
				}
				login(data).then(obj=>{
					if (obj.code == 200) {
						this.$store.dispatch('Login', obj.data.access_token)
						getUser().then(res=>{
							if (res.code == 200) {
								this.$store.dispatch('GetUserInfo', res).then((user)=>{
									if (user) {
										this.handleChange()
										this.clearForm()
										this.loading = false
										uni.navigateTo({
											url: '/pages/home/index'
										})
									} else {
										uni.showToast({
											title: '用户信息获取失败，请重新登录',
											icon: 'none'
										})
										this.clearForm()
										this.loading = false
									}
								})
							} else {
								this.loading = false
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(error=>{
							this.loading = false
						})
					} else {
						uni.showToast({
							title: obj.msg,
							icon: 'none'
						})
						this.getCode()
						this.loading = false
					}
				}).catch(error=>{
					this.loading = false
				})
    	});
    },
		// 情况表单
		clearForm() {
			this.form.username = ''
			this.form.password = ''
			this.form.code = ''
		}
  }
}
</script>
<style lang="scss" scoped>
	#login {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #F7F7F7;
		
		.login-bg {
			width: 100vw;
			height: 240px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-size: 100vw 240px;
			background-image: url(../../static/img/login/topbg.png);
			
			image {
				width: 192rpx;
				height: 174rpx;
			}
		}
		
		.login-box {
			width: 80vw;
			height: 80vh;
			padding: 20px;
			border-radius: 10px;
			margin: -50px auto 0 auto;
			background-color: #FFFFFF;
			
			.input-bar {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #B3B3B3;
				
				.uni-forms-item {
					flex: 1;
					
					/deep/ .uni-forms-item__inner {
						padding: 12px 0;
					}
					/deep/ .uni-error-message {
						right: 0;
						left: auto;
						margin-right: 5px;
					}
				}
				.imgCode {
					width: 100px;
					height: 36px;
					
					uni-image {
						width: 100px;
						height: 36px;
					}
				}
				.icon {
					width: 14px;
					height: 15px;
					margin: 0 10px;
				}
				.input-bar-text {
					color: #646566;
					margin-right: 30px;
				}
			}
			.remember-nav {
				display: flex;
				margin-top: 20rpx;
				justify-content: flex-end;
				
				/deep/ .checklist-box {
					margin-right: 2px;
				}
			}
		}
	}
	
	.popup-tip {
		padding: 20px;
	}
</style>
